<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收货地址管理</title>
    <!--导入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="../js/axios-0.19.0.js"></script>

    <style>
        .address-title {
            padding: 10px 0px;
            font-size: 26px;
            color: #eabc10;
        }

        .el-row {
            margin-bottom: 10px;
        }

        #app {
            padding: 15px;
        }
    </style>
</head>
<body>
<main id="app">
    <el-row :gutter="20">
        <el-col :span="5"><div class="grid-content bg-purple">
            <el-page-header @back="exit" content="收货人地址管理" title="退出"/>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            <el-input placeholder="请输入地址" v-model="param.add"  />
            <template slot="prepend">地址</template>
        </div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
            <el-input placeholder="请输入电话" v-model="param.tel"  />
            <template slot="prepend">电话</template>
        </div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple">
            <el-button type="primary" plain size="medium" icon="el-icon-search" @click="findCondition">查询</el-button>
        </div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple">
            <el-button type="primary"  plain size="medium" icon="el-icon-refresh" @click="cancel">清除</el-button>
        </div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">
            <el-button type="primary" plain size="medium" icon="el-icon-document" @click="showDialog">添加收货地址</el-button>
        </div></el-col>
    </el-row>
    <!--表格部分-->
    <el-row>
        <el-col :span="24">

            <el-table max-height="95%" style="width: 100%" border :data="pageBean.data">

                <el-table-column
                        label="序号" type="index" width="60" :index="indexMethod">
                </el-table-column>

                <el-table-column prop="contact" label="联系人">
                </el-table-column>

                <el-table-column
                        min-width="300"
                        prop="address"
                        label="联系地址">
                </el-table-column>

                <el-table-column
                        prop="telephone"
                        label="电话">
                </el-table-column>

                <el-table-column prop="isdefault" label="默认地址">
                    <template slot-scope="scope">
                        <el-switch
                                :value="scope.row.isdefault==1" @change="changeDefaultAddress(scope.row)"
                                active-text="是"
                                inactive-text="否">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini" icon="el-icon-edit" type="success" plain
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="warning" icon="el-icon-delete" plain
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

        </el-col>
    </el-row>

    <!-- 分页部分 -->
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="24">
                    <el-pagination
							background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageBean.current"
                            :page-sizes="[3,5,10]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageBean.count">
                    </el-pagination>
                </el-col>
            </el-row>

        </el-col>
    </el-row>

    <!--
    新增和修改对话框
    close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
     -->
    <el-dialog title="收货人信息" :visible.sync="dialogFormVisible" width="45%" @close="cancel" :close-on-click-modal="false">
        <!-- status-icon 为输入框添加了表示校验结果的反馈图标-->
        <el-form :model="form" :rules="rules" label-width="100px" size="small" ref="addressForm" status-icon>
            <!-- prop属性用于表单验证 -->
            <el-form-item label="联系人" prop="contact">
                <el-input v-model="form.contact" autocomplete="off" placeholder="请输入姓名" prefix-icon="el-icon-user" style="width:90%"/>
            </el-form-item>

            <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.address" autocomplete="off" placeholder="请输入联系地址" prefix-icon="el-icon-location" style="width:90%"/>
            </el-form-item>

            <el-form-item label="电话" prop="telephone">
                <el-input v-model="form.telephone" type="text" autocomplete="off" placeholder="请输入电话号码" prefix-icon="el-icon-phone" style="width:90%"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" icon="el-icon-ice-cream-round">取 消</el-button>
            <el-button type="primary" @click="save" icon="el-icon-milk-tea">确 定</el-button>
        </div>
    </el-dialog>
</main>
</body>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,  //对话框不可见

            //表单
            form: {
                contact: '',
                address: '',
                telephone: ''
            },
            //查询参数
            param: {
                current:1,
                size:5,
                add:'',
                tel:''
            },
            //页面对象
            pageBean: {},
            //校验规则
            rules: {
                //员工姓名
                contact: [
                    {required: true, message: '姓名不能为空', trigger: 'blur'},
                    {pattern: "^[\u4E00-\u9FA5]{2,4}$", message: '请输入2到4个汉字', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '联系地址必须输入', trigger: 'blur'},
                    {min: 5, message: '联系地址必须大于5个字符', trigger: 'blur'}
                ],
                telephone: [
                    {required: true, message: '电话号码不能为空', trigger: 'blur'},
                    {pattern: "^1[35789]\\d{9}$", message: '电话号码格式不正确', trigger: 'blur'}
                ]
            }
        },
        methods: {
            findCondition(){
                this.param.current=1;
                this.findAddress();
            },
            //查询所有地址
            findAddress() {
                axios.post("/address/find",this.param).then(resp=>{

                        this.pageBean=resp.data;

                });


            },
            //第一列的行号
            indexMethod(index) {
                return(this.param.current-1)*this.param.size+1+index;
            },
            //改变页面大小
            handleSizeChange(val) {
                this.param.size = val;
                this.findAddress();

            },
            //改变当前页
            handleCurrentChange(val) {
                this.param.current = val;
                this.findAddress();

            },
            //对话框的取消按钮
            cancel() {
                this.param={
                    add:'',
                    tel:''
                }
                this.dialogFormVisible = false;
                this.$refs.addressForm.resetFields();



            },
            //显示对象框
            showDialog() {
                this.dialogFormVisible = true;
                this.form={
                    contact:'',
                    address:'',
                    telephone:''
                }

            },
            //编辑按钮
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                Object.assign(this.form, row);

            },
            //确定按钮
            save() {
                // 为表单绑定验证功能
                this.$refs["addressForm"].validate((valid) => {
                    if (valid) {
                        if (this.form.aid) {
                            axios.post("/address/update",this.form).then(resp=>{
                                let resultInfo = resp.data;
                                if (resultInfo.success) {
                                    this.$message.success(resultInfo.message);
                                    this.cancel();
                                    this.findAddress();
                                }
                            });

                        }
                       else {
                            //
                            axios.post("/address/save", this.form).then(resp => {
                                let resultInfo = resp.data;
                                if (resultInfo.success) {
                                    this.$message.success(resultInfo.message);
                                    this.cancel();
                                    this.findAddress();
                                }
                            });
                        }
                    }
                    else {
                        return false;
                    }
                });
            },
            //删除按钮
            handleDelete(index, row) {
                axios.get("/address/delete?aid="+row.aid).then(resp=>{
                    let resultInfo = resp.data;
                    if (resultInfo.success){
                        this.$message.success(resultInfo.message);
                        this.findAddress();
                    }
                })

            },
            //设置为默认地址
            changeDefaultAddress(row) {
                axios.get("/address/changeDefaultAddress?aid="+row.aid).then(resp=>{
                    let resultInfo = resp.data;
                    if(resultInfo.success){
                        this.$message.success(resultInfo.message);
                        this.findAddress();
                    }
                })
            },
            //退出
            exit() {
                axios.get("/user/logout").then(resp=>{
                    let code = resp.status;
                    if(code==200){
                        location.replace("/login.html")
                    }
                });

            }
        },
        mounted() {
            //页面加载就读取所有地址数据
            this.findAddress();
        }
    });
</script>
</body>
</html>
